<template>
  <div class="login">
    <div class="identy-wrapper">
      <div class="textBox">
        <div class="welcome">欢迎登录</div>
        <div class="ask">
          还没帐号？ &nbsp;
          <router-link class="btn" to="/register">去注册</router-link>
        </div>
      </div>
      <div class="form-wrapper">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="phone"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
              autocomplete="on"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
              autocomplete="off"
            />
            <!-- <van-field
              v-model="verifyword"
              type="password"
              name="验证码"
              label="验证码"
              placeholder="验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
              autocomplete="off"
            /> -->
            <!-- <van-field
              v-model="sms"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button size="small" type="primary">发送验证码</van-button>
              </template>
            </van-field> -->
          </van-cell-group>
          <div style="margin: 32px 16px">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
import { verify, dologin } from '@/api/interface.js';
import { Toast } from 'vant';
export default {
  setup() {
    const state = reactive({
      phone: '15179502513',
      password: '123456',
      verifyword: '',
      sms: '123',
    });
    const router = useRouter();
    const onSubmit = async () => {
      const passwordReg = /^[\w_-]{6,16}$/;
      const phoneReg = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/;
      if (!phoneReg.test(state.phone)) {
        Toast({
          message: '输入正确的手机号喔',
          position: 'top',
        });
        return;
      }
      if (state.password == '') {
        Toast({
          message: '密码忘记写了喔',
          position: 'top',
        });
        return;
      }
      if (!passwordReg.test(state.password)) {
        Toast({
          message: '密码是6-16位喔',
          position: 'top',
        });
        return;
      }

      // 向后端发送数据
      const sendData = {
        phone: state.phone,
        password: state.password,
      };
      await dologin(sendData)
        .then((res) => {
          if (res.token) {
            // localStorage.setItem('token', res.token);
            sessionStorage.setItem('token', res.token);
            window.sessionStorage.setItem('token', res.token);
          }
          window.location.href = '/home';
        })
        .catch((err) => {
          console.log('err', err);
          state.password = '';
        });
    };

    onBeforeMount(async () => {
      await verify()
        .then(() => {
          router.push({
            path: '/home',
          });
        })
        .catch((err) => {
          new Promise((res, rej) => {
            rej(err.message);
          });
        });
    });
    return { ...toRefs(state), onSubmit };
  },
};
</script>
<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.identy-wrapper {
  margin-top: 10vh;

  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .textBox {
    height: 100px;
    .welcome {
      margin-left: 32px;
      margin-top: 25px;
      font-size: 32px;
      color: #000;
      font-weight: bold;
    }
    .ask {
      margin-left: 32px;
      margin-top: 5px;
      font-size: 10px;
      cursor: pointer;
      .btn {
        color: #529de6;
      }
    }
  }
}
</style>
